<template>
  <div class="code">
    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
      验证码登录
    </van-divider>
    <van-form @submit="onSubmit">
      <van-field
        v-model="phone"
        name="手机号"
        label="手机号"
        placeholder="手机号"
        :rules="[
          { required: true, message: '请填写手机号' },
          { pattern: /^1[356789]\d{9}$/, message: '手机号格式错误' },
        ]"
      />
      <van-field
        v-model="sms"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
        :rules="[
          { required: true, message: '请填写验证码' },
        ]"
      >
        <template #button>
          <van-button size="small" type="primary" :disabled="isClick" @click.stop="sendCode()"
            >{{time}}</van-button
          >
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button round block  type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <div class="content_btn">
      <van-button round block  type="info"  class="btn" @click="register()">去注册</van-button>
      <van-button round block  type="info"  class="btn" @click="login()">使用密码登录</van-button>
    </div>
  </div>
</template>

<script>
import url from '../tools/url'
import { Toast } from "vant";
export default {
  name: 'Code',
  data () {
    return {
      phone:"",
      sms:"",
      isClick:false,
      time:"发送验证码"
    } 
  },
  methods: {
    register(){
      this.$router.push("/register")
    },
    login(){
      this.$router.push("/login")
    },
    onSubmit(){
      var str =  `phone=${this.phone}&code=${this.sms}`;
      this.axios.post("api3"+url.LOGIN,str).then(res=>{
        console.log(res);
        if(res.data.code == 200){
          sessionStorage.setItem("token",res.data.data.token);
          this.$store.commit("save",res.data.data)
        }
        this.$router.push("/");
      });

    },
    sendCode(){
        if(/^1[356789]\d{9}$/.test(this.phone)) {
          //禁用按钮，设置倒计时
          this.isClick = true;
          var s = 10;
          var timer = setInterval(()=>{
            s--;
            this.time = s +"s";
            if(s<1){
              this.time="重新发送"
              this.isClick = false;
              clearInterval(timer)
            }
          },1000)

          console.log("发送验证码");
          this.axios.get("api3"+url.GETCODE+"?phone="+this.phone).then(res=>{
            console.log(res);
            if(res.data.code==200){
              this.sms = res.data.data;
            }else{
              Toast("手机号格式有误");
            }
        })
      } else { 
        // Toast(res.data.message);
      }
    }
  },
  computed: {
    
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mine{
  margin-top: 45px;
  margin-bottom: 62px ;
}
.btn{
  width:43%;
  background-color:rgb(241, 104, 86);
}
.content_btn{
  display: flex;
  justify-content: space-around;
}
</style>
